import { useEffect, useState, useRef } from 'react';
import { Spin } from 'antd';

import styles from './index.module.scss';

export default props => {
    const initState = () => ({});
    const [state, setState] = useState(initState);
    const { width=180, url, status, onRefresh } = props; // loading, error, active, noagree

    const getMask = () => {
        if('loading' === status) return <Spin/>;
        if('expired' === status) {
            return <div className={styles['expired']}>
                <div>二维码已过期</div>
                <div onClick={onRefresh}>点击刷新</div>
            </div>
        }
        if('noagree' === status) {
            return <div className={styles['expired']}>
                <div>请同意用户协议和隐私政策</div>
            </div>
        }

        return <div>发生异常，稍后重试</div>;
    };

    return (
        <div className={styles['container']}>
            <div className={styles['image']} style={{width, height: '160px'}}>
                { url ? <img src={url || '/images/image-holder.svg'} /> : null }
                { 'active' === status ? null : <div className={styles['mask']}>{getMask()}</div> }
            </div>
        </div>
    )
}
